<template>
	<div>
		<!-- 输入框 div -->
		<div class="my-input-div">
			<div class="my-inline-item my-icon">
				<span class="material-icons">qr_code</span>
			</div>
			<label>
				<input class="my-inline-item" type="text" placeholder="搜索商品/品牌/设计师">
			</label>
			<div class="my-inline-item my-scan">
				<span class="material-icons">search</span>
			</div>
		</div>
		<!-- 轮播图 div -->
		<mu-carousel :active="0">
			<mu-carousel-item v-for="(item, index) in carousel" :key="index">
				<img :src="item">
			</mu-carousel-item>
		</mu-carousel>
		<!--分类-->
		<div class="my-catgories">
			<mu-row>
				<mu-col @click="categoryClick(item)" span="3" v-for="(item, key) in categories" :key="key">
					<div class="grid-cell">
						<mu-row class="my-grid-cell-img">
							<img :src="item.isrc" :alt="item.iname">
						</mu-row>
						<mu-row class="my-grid-cell-text">
							<p>{{item.iname}}</p>
						</mu-row>
					</div>
				</mu-col>
			</mu-row>
		</div>
		<!--子页面-tab菜单页-->
		<mu-drawer :width="drawerWidth" :open.sync="open" :docked="docked" :right="position === 'right'">
			<!--tab页面header-->
			<mu-appbar z-depth="1" style="width: 100%;" color="white" text-color="black">
				<mu-button icon slot="left" @click="open=!open">
					<mu-icon value="keyboard_arrow_left"></mu-icon>
				</mu-button>
				分类
				<mu-button flat slot="right">
					<mu-icon value="search"></mu-icon>
				</mu-button>
			</mu-appbar>
			<!--tab菜单-->
			<my-tab :tabs="tabs" :value="activated"/>
		</mu-drawer>
		<div class="my-line-divider"></div>
		<!--滑动卡片-->
		<my-card-slider :gradual="true"/>
		<my-c-divider title="家居推荐" hint="热门家居为您奉上"/>
		<!--家居推荐-->
		<my-recom-slider/>
		<!--备案，页脚-->
		<my-footer/>
	</div>
</template>

<script>
import MyTab from "@/pages/components/public/MyTab";
import MyFooter from "@/pages/components/public/MyFooter";
import MyCDivider from "@/pages/components/public/MyCDivider";
import MyCardSlider from "@/pages/components/public/MyCardSlider";
import MyRecomSlider from "@/pages/components/public/MyRecomSlider";

export default {
	name: "Home",
	components: {MyTab, MyFooter, MyCDivider, MyCardSlider, MyRecomSlider},
	data() {
		return {
			docked: false,
			open: false,
			position: 'left',
			drawerWidth: '100%',
			carousel: [],
			categories: [],
			tabs: [
				{accent: "#8B0000", label: "热门", icon: "whatshot"},
				{accent: "#FFA500", label: "沙发", icon: "weekend"},
				{accent: "#551A8B", label: "床具", icon: "king_bed"},
				{accent: "#0000FF", label: "柜架", icon: "sensor_window"},
				{accent: "#FF4757", label: "桌凳", icon: "devices"},
				{accent: "#20C9C0", label: "灯具", icon: "wb_incandescent"},
				{accent: "#5B3CC4", label: "家纺", icon: "home_work"},
				{accent: "#242145", label: "餐具", icon: "restaurant"},
				{accent: "#FF8200", label: "装饰", icon: "color_lens"},
				{accent: "#17C964", label: "礼品", icon: "all_inclusive"}
			],
			activated: 0
		}
	},
	created() {
		this.getCarousel()
		this.getCategories()
	},
	methods: {
		categoryClick: function (param) {
			this.open = !this.open
			let map = {
				"t0": 1,
				"t1": 2,
				"t2": 3,
				"t3": 4,
				"t4": 5,
				"t5": 6,
				"t6": 7,
				"t7": 0
			}
			this.activated = map[param.aname]
		},
		getCategories: function () {
			this.$axios.get('http://localhost:8081/api/categories')
				.then(res => {
					this.categories = res.data
				})
				.catch(err => {
					console.log(err)
				})
		},
		getCarousel: function () {
			this.$axios.get('http://localhost:8081/api/carousel')
				.then(res => {
					this.carousel = res.data
				})
				.catch(err => {
					console.log(err)
				})
		},
	}
}
</script>

<style scoped>
	input {
		background-color: #F4F4F4;
		border: none;
		font-size: 16px;
		line-height: 50px;
		height: 50px;
		width: calc(100vw - 120px);
	}
	input:focus {
		outline: none;
	}
	.my-input-div {
		height: 60px;
		margin: 0 0 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.my-inline-item {
		display: inline-block;
		background-color: #F4F4F4;
	}
	.my-icon, .my-scan {
		height: 50px;
		font-size: 35px;
		width: 50px;
	}
	.my-icon {
		border-radius: 50% 0 0 50%;
	}
	.my-scan {
		border-radius: 0 50% 50% 0;
	}
	.mu-carousel {
		height: 160px;
		margin: 10px auto;
		width: calc(100vw - 20px);
		border-radius: 15px;
	}
	.mu-carousel-item img {
		width: 100%;
		height: 100%;
	}
	.my-catgories {
		height: 140px;
		width: calc(100vw - 20px);
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.grid-cell {
		width: 60px;
		height: 60px;
		margin: 10px auto;
	}
	.my-grid-cell-img img {
		width: 50%;
		height: 50%;
		margin: 4px auto 0;
	}
	.my-grid-cell-text p {
		text-align: center;
		width: 100%;
		margin: 4px 0 0;
	}

	.my-line-divider {
		border-top: 2px solid #4CA18C;
		margin: 15px 40px;
	}
	div .mu-item {
		justify-content: space-between !important;
		font-size: 30px;
	}
	.mu-list {
		padding: 0;
	}
	.mu-button .mu-icon-left {
		margin: 0;
	}
</style>